<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			:root {
				--color: #0ebeff;
			}
			
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				background: #000;
			}
			
			*, *::before, *::after {
				box-sizing: border-box;
			}
			
			@keyframes rotate {
				100% {
					transform: translate(-50%, -50%) rotate(1turn);
				}
			}
			
			.btn {
					position: fixed;
						left: 20px;     /* 距离左边20像素 */
						bottom: 80px;   /* 距离底部20像素 */
						z-index: 0;
						width: 160px;
						height: 50px;
						line-height: 50px;
						color: var(--color);
						font-size: 24px;
						border-radius: 10px;
						text-align: center;
						/* 移除原来的margin: auto */
						overflow: hidden;	
						cursor: pointer;
						transition: .3s;
						-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, .4));
	
			
				&:hover {
					color: #fff;
					box-shadow: 0 0 5px var(--color),
						0 0 25px var(--color);
					
					&::after,
					&::before {
						transition: .3s;
						background: var(--color);
					}
				}
				
				&::before {
					
					content: '';
					position: absolute;
					z-index: -2;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 150%;
					height: 300%;
					background-color: #000;
					background-repeat: no-repeat;
					background-size: 50% 50%;
					background-position: 0 0;
					background-image: conic-gradient(var(--color), var(--color));
					animation: rotate 2s linear infinite;
				}
				
				&::after {
					content: '';
					position: absolute;
					z-index: -1;
					left: 2px;
					top: 2px;
					width: calc(100% - 4px);
					height: calc(100% - 4px);
					background: #000;
					border-radius: 10px;
				}
			}
			
			.btn1 {
				filter: hue-rotate(180deg);
			}
			
			.btn2 {
				filter: hue-rotate(270deg);
			}
			
			.btn3 {
				filter: hue-rotate(90deg);
			}
			
		</style>
	<body>
		<div class="btn" onclick="showCustomDialog()">Ciallo关于</div>
	</body>
	
<script>
function showCustomDialog() {
    const overlay = document.createElement('div');
    overlay.style = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    `;

    const dialog = document.createElement('div');
    dialog.style = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 30px 50px;
        background: #000;
        border-radius: 15px;
        border: 2px solid ${getComputedStyle(document.documentElement).getPropertyValue('--color')};
        box-shadow: 0 0 20px ${getComputedStyle(document.documentElement).getPropertyValue('--color')};
        color: #fff;
        text-align: center;
        min-width: 300px;
    `;
	
	
    
    dialog.innerHTML = `
        <h2 style="color: var(--color); margin: 0 0 15px 0;">Ciallo～(∠・ω< )⌒★</h2>
        <p>要加入我们吗</p>
        <div style="display: flex;
                    gap: 15px;
                    justify-content: center;
                    margin-top: 25px;">
            <button onclick="window.open('http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=-c_H6VShhhPyrE5MTygCV4tJJFefKr2j&authKey=kifgItJsLpvUls6p19DsieIAmV7cJjaAnz0lmQHOVbtN2Vz%2Ba9awhYJkZvWz9JKE&noverify=0&group_code=970336486', '_blank')"
                style="flex: 1;
                       padding: 8px 25px;
                       background: var(--color);
                       border: none;
                       border-radius: 5px;
                       cursor: pointer;
                       transition: 0.3s;">
                确定
            </button>
            <button onclick="this.parentElement.parentElement.parentElement.remove()"
                style="flex: 1;
                       padding: 8px 25px;
                       background: #444;
                       border: none;
                       border-radius: 5px;
                       cursor: pointer;
                       transition: 0.3s;">
                关闭
            </button>
        </div>
    `;

    // 为按钮添加悬浮效果
    dialog.querySelectorAll('button').forEach(btn => {
        btn.onmouseenter = () => {
            btn.style.boxShadow = `0 0 10px ${getComputedStyle(document.documentElement).getPropertyValue('--color')}`;
        }
        btn.onmouseleave = () => {
            btn.style.boxShadow = 'none';
        }
    });

    overlay.onclick = (e) => {
        if(e.target === overlay) overlay.remove();
    }
    
    overlay.appendChild(dialog);
    document.body.appendChild(overlay);
}
</script>
	    // 点击遮罩层关闭
	    overlay.onclick = () => overlay.remove();
	    
	    overlay.appendChild(dialog);
	    document.body.appendChild(overlay);
	}
	</script>
</html>
